<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Fire veninder og et par jeans</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet'/>
    <link rel="stylesheet" href="css/style.css" />
    
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>


<style>    
#map {
    position: fixed;
    width:50%;
}
#features {
    width: 50%;
    margin-left: 50%;
    overflow-y: scroll;
    font-family: 'dinglesw', sans-serif;
    background-color: #ffff;
    margin-bottom: 8%;
}
section {
    padding:  25px 50px;
    line-height: 25px;
    border-bottom: 1px solid #ddd;
    opacity: 0.25;
    font-size: 13px;
}
section.active {
    opacity: 1;
}
section:last-child {
    border-bottom: none;
    margin-bottom: 200px;
}
      
</style>

<div id='map'></div>
<div id='features'>
    <section id='baker' class='active'>
        <h1>Fire veninder og et par jeans</h1>
        <br>
        <h3>De perfekte bukser</h3>
        <img src="image/Bukser.jpg" width="100%">
    </section>
    <section id='grækenland'>
        <h3>Lena</h3>
        <img src="image/Lena.jpg" width="100%">
    </section>
    <section id='maryland'>
        <h3>Tibby</h3>
       <img src="image/Tibby.jpg" width="100%">
    </section>
    <section id='mexico'>
        <h3>Bridget</h3>
       <img src="image/Bridget.jpg" width="100%">
    </section>
    <section id='south carolina'>
        <h3>Carmen</h3>
        <img src="image/Carmen.jpg" width="100%">
    </section>
    <section id='maryland1'>
        <h3>De fire veninder</h3>
        <img src="image/Pigerne%20samlet.jpg" width="100%">
    </section>

</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaGNhbGxlc2VuIiwiYSI6ImNqZmZtNmh5bzNjN2Yyd25yeXlpenZscXMifQ.7JleUUhlkre9XfkR0q8VIg';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/hcallesen/cjflg21v29yee2ro40gfakwz4',
    center: [-77.1526, 38.9919],
    zoom: 10,
    bearing: 250,
    pitch: 40
});

var chapters = {
    'grækenland': {
        bearing: 27,
        center: [25.461140, 36.400778],
        zoom: 5,
        pitch: 75
    },
    'maryland': { 
        duration: 6000,
        center: [-77.096776, 38.984674],
        bearing: 150,
        zoom: 15,
        pitch: 0
    },
    'mexico': {
        bearing: 240,
        center: [-109.897630, 22.876186],
        zoom: 5,
        speed: 1.3,
        pitch: 60
    },
    'south carolina': {
        bearing: 90,
        center: [-80.390685, 33.873750],
        zoom: 12.3
    },
    'maryland1': {
        bearing: 50,
        center: [-77.096776, 38.984674],
        zoom: 15,
        pitch: 50,
        speed: 1
    }
    
    
};
    //maryland
     lokation = new mapboxgl.Marker()
    .setLngLat([-77.1526, 38.9919])
    .addTo(map);
    
    
    //grækenland
     lokation = new mapboxgl.Marker()
    .setLngLat([25.461140, 36.400778])
    .addTo(map);
    
    //maryland
     lokation = new mapboxgl.Marker()
    .setLngLat([-77.096776, 38.984674])
    .addTo(map);
    
    //mexico
    lokation = new mapboxgl.Marker()
    .setLngLat([-109.897630, 22.876186])
    .addTo(map);
    
    //south carolina
    lokation = new mapboxgl.Marker()
    .setLngLat([-80.390685, 33.873750])
    .addTo(map);
    
    //maryland1
    lokation = new mapboxgl.Marker()
    .setLngLat([-77.1526, 38.9919])
    .addTo(map);
    
    
    
// On every scroll event, check which element is on screen
window.onscroll = function() {
    var chapterNames = Object.keys(chapters);
    for (var i = 0; i < chapterNames.length; i++) {
        var chapterName = chapterNames[i];
        if (isElementOnScreen(chapterName)) {
            setActiveChapter(chapterName);
            break;
        }
    }
};

var activeChapterName = 'baker';
function setActiveChapter(chapterName) {
    if (chapterName === activeChapterName) return;

    map.flyTo(chapters[chapterName]);

    document.getElementById(chapterName).setAttribute('class', 'active');
    document.getElementById(activeChapterName).setAttribute('class', '');

    activeChapterName = chapterName;
}

function isElementOnScreen(id) {
    var element = document.getElementById(id);
    var bounds = element.getBoundingClientRect();
    return bounds.top < window.innerHeight && bounds.bottom > 0;
}

</script>

</body>
</html>